import { TreeSelect } from 'antd';
import { useState } from 'react';



const Index =()=>{

    const treeData = [
        {
          title: 'Node1',
          value: '0-0',
          key: '0-0',
          children: [
            {
              title: 'Child Node1',
              value: '0-0-0',
              key: '0-0-0',
            },
            {
              title: 'Child Node2',
              value: '0-0-1',
              key: '0-0-1',
            },
            {
              title: 'Child Node3',
              value: '0-0-2',
              key: '0-0-2',
            },
            {
              title: 'Child Node4',
              value: '0-0-3',
              key: '0-0-3',
            },
            {
              title: 'Child Node5',
              value: '0-0-4',
              key: '0-0-4',
            },
          ],
        },
        {
          title: 'Node2',
          value: '0-1',
          key: '0-1',
          children: [
            {
              title: 'Child Node3',
              value: '0-1-0',
              key: '0-1-0',
            },
            {
              title: 'Child Node4',
              value: '0-1-1',
              key: '0-1-1',
            },
            {
              title: 'Child Node5',
              value: '0-1-2',
              key: '0-1-2',
            },
          ],
        },
        {
          title: 'Node3',
          value: '0-2',
          key: '0-2',
          children: [
            {
              title: 'Child Node3',
              value: '0-2-0',
              key: '0-2-0',
            },
            {
              title: 'Child Node4',
              value: '0-2-1',
              key: '0-2-1',
            },
            {
              title: 'Child Node5',
              value: '0-2-2',
              key: '0-2-2',
            },
          ],
        },
      ];

const [menuValue,setMenuValue] = useState([])

const onChange = (value:any) => {
    console.log('onChange ', value);
    setMenuValue(value)

  };

const { SHOW_PARENT } = TreeSelect;

const tProps = {
    treeData,
    value: menuValue,
    onChange: onChange,
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    placeholder: 'Please select',
    treeDefaultExpandAll:true,
    style: {
      width: '50%',
      outerHeight:500
    },
  };

    return (
        <div>
            <TreeSelect {...tProps} />
        </div>
    )
}

export default Index;



